;(function () {
    const template = `  <div class="jumbotron">
            <h2>{{techDetail.title}}</h2>
                <p>{{techDetail.content}}</p>
        </div>`;


    window.TechDetail = {
        template,
        data() {
            return {
                techDetail: {}
            };
        },
        created() {
            this.getTechById();
        },
        methods: {
            getTechById() {
                const id = this.$route.params.id - 0;
                axios.get("http://localhost:63342/vue-mxg/vue-08-router/02-bootstrap-ajax-router/tech.json").then(item => {
                    const techArr = item.data;
                    this.techDetail = techArr.find(tech => {
                        console.log(tech)
                        return id == tech.id;
                    });

                }).catch(error => {
                    console.log(error.message)
                });
            }
        }
    }
})();
